<nz-card class="m-b-2">
  <div class="common-search-wrap">
    <div class="common-search-forms">
      <div class="common-form-item">
        <label class="common-search-label">商品</label>
        <div class="common-search-conrol">
          <input nz-input placeholder="请输入商品编号或名称" [(ngModel)]="query.goodsName"/>
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">商品分类</label>
        <div class="common-search-conrol">
          <nz-select
            [(ngModel)]="query.goodsTypeList"
            nzAllowClear
            [nzMaxTagCount]="1"
            nzMode="multiple"
            nzPlaceHolder="请选择分类">
            <nz-option *ngFor="let item of categoryOptions" [nzLabel]="item['name']" [nzValue]="item['id']"></nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">状态</label>
        <div class="common-search-conrol">
          <nz-select [(ngModel)]="query.status" nzPlaceHolder="请选择状态" nzAllowClear>
            <nz-option nzLabel="已上架" nzValue="1"></nz-option>
            <nz-option nzLabel="未上架" nzValue="2"></nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">创建日期</label>
        <div class="common-search-conrol">
          <nz-range-picker nzFormat="yyyy-MM-dd" [(ngModel)]="query.date"></nz-range-picker>
        </div>
      </div>

      <div class="common-form-item">
        <button nz-button nzType="primary" class="m-r-8" (click)="queryBtn()">查询</button>
        <button nz-button nzType="default" (click)="resetCondition()">重置</button>
        <!-- <button nz-button nzType="link" (click)="isCollapse = !isCollapse">
          {{ isCollapse ? '收起' : '展开' }}<i nz-icon [nzType]="isCollapse ? 'up' : 'down'" nzTheme="outline"></i>
        </button> -->
      </div>
    </div>
  </div>
</nz-card>

<nz-card class="pagination-wrap-position">
  <div class="operation-wrap p-b-10">
    <button nz-button nzType="primary" class="m-r-8" (click)="gotoPage('add')">新增商品</button>
    <button nz-button nzType="default" class="m-r-8" (click)="batchOperation(1)">批量上架</button>
    <button nz-button nzType="primary" (click)="batchOperation(0)" nzDanger>批量下架</button>
  </div>
  
  <!--表格-->
  <nz-table
    #rowSelectionTable
    nzShowSizeChanger
    nzShowQuickJumper
    nzOuterBordered
    nzSize="small"
    [nzData]="listOfData.records"
    [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
    [nzTotal]="listOfData.total"
    [(nzPageIndex)]="query.page"
    [(nzPageSize)]="query.pageSize"
    [nzFrontPagination]="false"
    [nzShowTotal]="totalTemplate"
    (nzPageIndexChange)="onPageIndexChange($event)"
    (nzPageSizeChange)="onPageSizeChange($event)"
  >
    <thead>
      <tr>
        <th [nzChecked]="checked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="onAllChecked($event)"></th>
        <th nzAlign="center">排序</th>
        <th nzAlign="center">ID</th>
        <th nzAlign="center">商品</th>
        <th nzAlign="center">第三方商品ID</th>
        <th nzAlign="center">分类</th>
        <th nzAlign="center">创建时间</th>
        <th nzAlign="center">状态</th>
        <th nzAlign="center">操作</th>
      </tr>
    </thead>

    <tbody>
      <tr *ngFor="let data of rowSelectionTable.data;let index=index">
        <td
          [nzChecked]="setOfCheckedId.has(data['id'])"
          (nzCheckedChange)="onItemChecked(data['id'], $event)"
        ></td>
        <td nzAlign="center">{{ index + 1 }}</td>
        <td nzAlign="center">{{ data['id'] }}</td>
        <td>
          <img
            nz-image
            width="40px"
            height="60px"
            *ngIf="data['bottomImage']"
            [nzSrc]="data['bottomImage']"
            alt=""
          />
          <span *ngIf="!data['bottomImage']" style="display: inline-block;height: 70px;width: 50px"></span>
          {{ data['name'] }}</td>
        <td nzAlign="center">{{ data['pictureId'] }}</td>
        <td nzAlign="center">{{ data['typeName'] }}</td>
        <td nzAlign="center">{{ data['createTime'] }}</td>
        <td [ngStyle]="{color: data['status']===1?'#67C23A':'black'}"
          nzAlign="center">{{ data['status'] === 0 ? '已删除' : data['status'] === 1 ? '已上架' : data['status'] === 2 ? '未上架' : '未知' }}</td>
        <td nzAlign="center">
          <a (click)="gotoPage('edit',data)">编辑</a>
          <a [ngStyle]="{color: data['status']===1?'#F56C6C':'#409EFF'}" (click)="putawayCommodity(data)">{{data['status'] === 1 ? '下架' : data['status'] === 2 ? '上架' : '已删除' }}</a>
          <a style="color: #F56C6C"
            nzPopconfirmPlacement="top"
            nz-popconfirm
            nzPopconfirmTitle="确认要删除该数据吗?"
            nzOkText="确认"
            nzCancelText="取消"
            (nzOnConfirm)="deleteCommodity(data['id'])">
            删除
          </a>
        </td>
      </tr>
    </tbody>
  </nz-table>
  <!-- 分页template -->
  <ng-template #totalTemplate let-total>共有 {{ listOfData['total'] }} 条</ng-template>
</nz-card>
